<template>
 <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    status-icon
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
  >
    <el-form-item  prop="username">
      <el-input v-model="ruleForm.username" type="text"  placeholder="请输入账号"/>
    </el-form-item>
    <el-form-item  prop="pwd">
      <el-input
        v-model="ruleForm.pwd"
        type="password"
        placeholder="请输入密码"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleFormRef')"
        >Submit</el-button
      >
    </el-form-item>
  </el-form>
</template>


<script setup lang="ts">
import {reactive,toRefs,ref} from 'vue'
import {adminLogin,adminTnfo} from '@/request/api'
import { useRouter } from 'vue-router'; //引入路由
import {useStore} from 'vuex'
import {key} from '@/store/index'
const usernamevoild=(rule:unknown,value:string,cb:(str?:string)=>void)=>{
  if(value){
    if(value.length<3){
      cb('账号长度不能小于3位');
    }else{
      cb()
    }
  }else{
    cb()
  }
}

let router = useRouter()  //生成路由对象
let store = useStore(key)
let submitForm = (str:any)=>{
  ruleFormRef.value.validate((isVali:boolean)=>{
    console.log(isVali);
    if(isVali){
      adminLogin({
        password:ruleForm.value.pwd,
        username:ruleForm.value.username
      }).then(res=>{        
        if(res.code ==200){
          if(res.data){
            console.log(res);
          localStorage.setItem('token',res.data.tokenHead+res.data.token)
          adminTnfo().then(res=>{
            console.log(res);
            if(res.code==200){
              store.commit('USER',res.data)
             router.push('/header')
            }
          })
          }
        }
      })
    }else{
    }
  })
}
let state = reactive({
  ruleForm:{
    username:'',
    pwd:''
  },
  rules:{
    username: [
    { required: true, message: '账号不能为空', trigger: 'blur' },
    {validator:usernamevoild,trigger: 'blur'}
  ],
   pwd: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
  ],
  }
})
let {ruleForm,rules} = toRefs(state)
let ruleFormRef = ref()


</script>


<style>

</style>